<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>生成邀请函</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" href="fonts/iconfont.css">
		<link rel="stylesheet" href="css/templateAnimate.css">
		<style>
			html,body,.mui-content{height: 100%;}
			.xyy{
				text-align: center;
				display: block;
				height: 100%;
				line-height: 35px;
				background-color: rgba(254, 82, 86, 1);
				color: #fff;
				width: 100%;
				border: none;
			}
			.mui-control-content{
				position: relative;
				height: 100%;
				background: #fff;
			}
			input, select, textarea {
				font-size: 12px;
			}
			.guanli{
				width: 62px;
				height: 62px;
				background: url(img/gui_btn_guanli@2x.png);
				background-size: 100%;
				position: absolute;
				right: 0px;
				bottom: 50px;
			}
			.syy{
				width: 62px;
				height: 62px;
				background: url(img/gui_btn_shangyiye@2x.png);
				background-size: 100%;
				position: absolute;
				right: 0px;
				bottom: 120px;
			}
			.glmenu{
				width: 132px;
				background: rgba(255,255,255,1);
				box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
				border-radius: 2px;
				position: absolute;
				right: 62px;
				bottom: 20px;
				display: none;
			}
			.glmenu.active{
				display: block;
			}
			.bottombar{
				bottom: 0px;
				padding: 5px;
				position: absolute;
				width: 100%;
				background: #fff;
				border-top: 1px solid #ccc;
			}
			.menuitem{
				padding: 10px;
				font-size: 12px;
				color: #696868;
				border-bottom: 1px solid #CCC;
			}
			.menuitem span{
				padding-left: 10px;
			}
			.mui-input-row .mui-btn.lcleft{
				float: left;
				width: 45%;
				font-size: 14px;
			}
			.mui-input-row label.lczj{
				width: 10%;
				font-size: 14px;
				padding: 11px 10px;
			}
			.mui-input-row .mui-btn.lcright{
				width: 45%;
				font-size: 14px;
			}
			.procedureBtn{
				width: 48%;
				display: inline-block;
				padding: 7px;
				font-size: 16px;
				background: #ffcdce;
				color: #fe5256;
				border: none;
				margin: 0px;
			}
			.content{
				padding: 10px;
				overflow: auto;
				height: 100%;
				padding-bottom: 46px;
			}
			.uploaderi{
				width: 114px;
				height: 150px;
				background: rgb(242, 242, 242);
				border-radius: 2px;
				margin-bottom: 5px;
				text-align: center;
				padding-top: 27px;
			}
			.uploaderi div{
				width: 70px;
				height: 70px;
				background: url(img/gui_touxiang@2x.png);
				background-size: 100%;
				display: inline-block;
			}
			.uploaderi span{
				display: block;
				font-size: 14px;
				font-family: PingFangSC-Semibold,PingFang SC;
				font-weight: 600;
				color: rgba(26,29,32,1);
				line-height: 20px;
			}
			.addimage{
				width: 178px;
				height: 100px;
				background: rgba(242,242,242,1);
				border-radius: 2px;
				text-align: center;
				padding-top: 18px;
			}
			.addimage div{
				width: 44px;
				height: 44px;
				display: inline-block;
				background: #fff;
				border-radius: 30px;
			}
			.addimage i{
				font-size: 25px;
				line-height: 45px;
				color: #ccc;
				font-weight: bold;
			}
			.addimage span{
				display: block;
				font-size: 12px;
				font-family: PingFangSC-Regular,PingFang SC;
				font-weight: 400;
				color: rgba(128,128,128,1);
				line-height: 17px;
				padding-top: 5px;
			}
			.music{
				background: rgba(255,255,255,1);
				border-radius: 37px;
				border: 1px solid rgba(199,199,199,1);
				width: 291px;
				height: 72px;
				padding: 15px;
				position: relative;
				float: left;
			}
			.music .music-left{
				width: 40px;
				height: 40px;
				border: 2px solid rgba(255,180,0,1);
				border-radius: 20px;
				line-height: 37px;
				text-align: center;
				display: inline-block;
				color: rgba(255,180,0,1);
				position: absolute;
			}
			.music .music-left i{
				font-size: 18px;
			}
			.music .music-right{
				display: inline-block;
				width: 170px;
				height: 40px;
				position: absolute;
				left: 60px;
			}
			.music .music-right label{
				width: 100%;
				font-size: 13px;
				font-family: PingFangSC-Medium,PingFang SC;
				font-weight: 500;
				color: rgba(242,141,0,1);
				line-height: 18px;
				padding: 0px;
				position: absolute;
				top: 5px;
			}
			.music .music-right .music-jdt{
				width: 170px;
				height: 2px;
				background: rgba(242,242,242,1);
				position: absolute;
				top: 28px;
			}
			.music .music-right .music-jx{
				width: 0%;
				height: 100%;
				background: rgba(242,141,0,1);
			}
			.music-check{
				height: 72px;
				line-height: 72px;
				text-align: center;
				cursor: pointer;
			}
			.music-check i{
				font-size: 20px;
				color: #ccc;
			}
			.section { position: relative;text-align: center; font: 50px "Microsoft Yahei"; color: #fff;background: url(img/chineseStyle/gui_bg@3x.png);background-size: 100%;}
			.main-bg{
				background: url(img/chineseStyle/gui_bg@3x.png);
			}
			.ele{
				position: absolute;
				background-size: 100%;
			}
			.yinyue{
				position: absolute;
				background: url(img/chineseStyle/gui_icon_yinyue@3x.png);
				background-size: 100%;
				width:36px;
				height:36px;
				top:20px;
				right:20px;
				z-index: 10000;
			}
			.tanimate{
				transition:all 2s ease-in-out;
			}
			.rotate{
			 -webkit-transition-property: -webkit-transform;
				-webkit-transition-duration: 1s;
				-moz-transition-property: -moz-transform;
				-moz-transition-duration: 1s;
				-webkit-animation: rotate 3s linear infinite;
				-moz-animation: rotate 3s linear infinite;
				-o-animation: rotate 3s linear infinite;
				animation: rotate 3s linear infinite;
			}
			@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
				to{-webkit-transform: rotate(360deg)}
			}
			@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
				to{-moz-transform: rotate(359deg)}
			}
			@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
				to{-o-transform: rotate(359deg)}
			}
			@keyframes rotate{from{transform: rotate(0deg)}
				to{transform: rotate(359deg)}
			}
			.section-bm{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: rgba(0,0,0,0.7);
				right: 0px;
				border-radius: 100px;
				line-height: 100px;
				z-index: 6;
			}
			.section-left{
				width: 120px;
				height: 120px;
				color: #fff;
				background-color: rgba(0,0,0,0.7);
				border-radius: 100px;
				position: absolute;
				z-index: 6;
				top: 50%;
				margin-top: -60px;
			}
			.section-left .iconfont{
				font-size: 60px;
				line-height: 120px;
			}
			.section-right{
				width: 120px;
				height: 120px;
				color: #fff;
				background-color: rgba(0,0,0,0.7);
				border-radius: 100px;
				position: absolute;
				z-index: 6;
				right: 0px;
				top: 50%;
				margin-top: -60px;
			}
			.section-right .iconfont{
				font-size: 60px;
				line-height: 120px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="mui-content">
			<div v-for="(item,index) in initDatas" :key="index" :id="'item'+item.ym" :name="item.type" :index="item.ym" :class="item.ym == showDivIndex?'mui-control-content mui-active':'mui-control-content'">
				<div v-if="item.type == 'infinitusInvitationMain'" class="content">
					<h5>活动主题：</h5>
					<div class="mui-input-row">
						<input type="text" v-model="item.infinitusInvitationMain.theme" placeholder="请输入不超过10字的活动主题">
					</div>
					<h5>副标题：</h5>
					<div class="mui-input-row">
						<input type="text" v-model="item.infinitusInvitationMain.themeSub" placeholder="请输入不超过16字的副标题">
					</div>
					<h5>活动时间：</h5>
					<div class="mui-input-row">
						<input type="text" v-model="item.infinitusInvitationMain.activityTime" @click.stop="showtime(item)" placeholder="如：2020年01月22日 9点30分">
					</div>
				</div>
				<div v-if="item.type == 'infinitusInvitationIntroduce'" class="content">
					<h5>主标题：</h5>
					<div class="mui-input-row">
						<input type="text" v-model="item.infinitusInvitationIntroduce.mainTitle" placeholder="公司简介">
					</div>
					<h5>活动信息：</h5>
					<div class="mui-input-row">
						<textarea v-model="item.infinitusInvitationIntroduce.contnet" placeholder="此处默认放置无极限公司简介" rows="7"></textarea>
					</div>
					<h5>添加图片：</h5>
					<div class="mui-input-row">
						<div style="width: 114px;float: left;">
							<div class="addimage" @click="updateImage(item.ym+'file')" v-if="!item.infinitusInvitationIntroduce.image">
								<div><i class="icon iconfont">&#xe600;</i></div>
								<span>上传照片</span>
							</div>
							<div v-else style="width: 178px; height: 100px;">
								<img :src="item.infinitusInvitationIntroduce.image" alt="" srcset="" style="width: 100%;height: 100%;">
							</div>
							<input type="file" class="fileUp" name="file" :id="item.ym+'file'" @change="upImage(item.ym+'file',item.infinitusInvitationIntroduce)"
								style="display: none;" accept="image/*">
						</div>
						<!-- <input type="text" placeholder="如：2020年01月22日 9点30分"> -->
					</div>
				</div>
				<div v-if="item.type == 'infinitusInvitationProcedure'" class="content">
					<h5>主标题：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationProcedure.mainTitle" type="text" placeholder="活动流程">
					</div>
					<div v-for="(item2,index2) in item['infinitusInvitationProcedure'].datas">
						<h5>{{"流程"+(index2+1)}}：</h5>
						<div class="mui-input-row">
							<button class="btn mui-btn mui-btn-block lcleft" @click="addPicker(item.ym,index2,'lcleft',item2)">{{item2.time1 || "选择时间"}}</button>
							<label class="lczj">至</label>
							<button class="btn mui-btn mui-btn-block lcright" @click="addPicker(item.ym,index2,'lcright',item2)">{{item2.time2 || "选择时间"}}</button>
						</div>
						<div class="mui-input-row" style="background: rgba(242,242,242,1);">
							<label style="width: 50px;padding: 14px 10px;font-size: 12px;">内容:</label>
							<input v-model="item2.contnet" type="text" style="width: calc(100% - 50px);" placeholder="请出入不超过8字的主题">
						</div>
					</div>
				</div>
				<div v-if="item.type == 'infinitusInvitationGuest'" class="content">
					<h5>主标题：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationGuest.mainTitle" type="text" placeholder="特邀嘉宾">
					</div>
					<div v-for="(item2,index2) in item['infinitusInvitationGuest'].datas">
						<h5>{{"嘉宾"+(index2+1)}}：</h5>
						<div class="mui-input-row">
							<div style="width: 114px;float: left;">
								<div class="uploaderi" @click="updateImage(item.ym+'file'+index2)" v-if="!item2.image">
									<div></div>
									<span>上传照片</span>
								</div>
								<div v-else style="width: 114px; height: 150px;">
									<img :src="item2.image" alt="" srcset="" style="width: 100%; height: 100%;">
								</div>
								<input :id="item.ym+'file'+index2" style="display: none;"
									@change="upImage(item.ym+'file'+index2,item2)" type="file" accept="image/*" capture="camera">
								<div><input v-model="item2.name" type="text" placeholder="输入嘉宾名称"></div>
							</div>
							<div style="width: calc(100% - 120px);height: 195px;float: right;">
								<textarea v-model="item2.contnet" style="height: 100%;" placeholder="请输入不超过60字的嘉宾简介" rows="5"></textarea>
							</div>
						</div>
					</div>
				</div>
				<div v-if="item.type == 'infinitusInvitationFoot'" class="content">
					<h5>主标题：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.mainTitle" type="text" placeholder="主标题">
					</div>
					<h5>活动地址：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.address" type="text" placeholder="请输入不超过40字的活动地址">
					</div>
					<h5>活动时间：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.activityTime" type="text" @click.stop="showtime(item)" placeholder="请输入活动时间">
					</div>
					<h5>位置：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.longitude" type="text" placeholder="请选择会议位置">
					</div>
					<h5>联系人：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.name" type="text" placeholder="请输入联系人姓名">
					</div>
					<h5>联系电话：</h5>
					<div class="mui-input-row">
						<input v-model="item.infinitusInvitationFoot.tell" type="text" placeholder="请输入联系电话">
					</div>
				</div>
				<div v-if="item.ym>1" class="mui-control-item syy" @click="showXyy(item.ym-1)"></div>
				<div class="guanli">
					<div class="glmenu">
						<div v-if="item.type != 'infinitusInvitationMain'" class="menuitem" :index="index" @click="deleteItem(item,index)"><i class="icon iconfont">&#xe61b;</i><span>删除本页</span></div>
						<div v-if="item.type != 'infinitusInvitationMain'" class="menuitem" :index="index" @click="copy(item,index)"><i class="icon iconfont">&#xe601;</i><span>复制本页</span></div>
						<div class="menuitem" :index="index" @click="showpx(item.ym)"><i class="icon iconfont">&#xe60a;</i><span>页面排序</span></div>
					</div>
				</div>
				<div class="bottombar" style="bottom: 0px;padding: 5px;" v-if="item.type != 'infinitusInvitationProcedure'">
					<div  class="mui-control-item xyy" @click="showXyy(item.ym+1)">下一页</div>
				</div>
				<div class="bottombar" style="bottom: 0px;padding: 5px;" v-if="item.type == 'infinitusInvitationProcedure'">
					<div class="btn mui-btn mui-btn-block procedureBtn" @click="addProcedure(item)">添加流程</div>
					<div  class="mui-control-item xyy" style="width: 48%;display: inline-block;" @click="showXyy(item.ym+1)">下一页</div>
				</div>
			</div>
			<div :id="'item'+(initDatas.length+1)" :class="initDatas.length+1 == showDivIndex?'musicitem mui-control-content mui-active':'musicitem mui-control-content'">
				<h5 style="color: #000;padding: 10px;font-size: 16px;">选择背景音乐</h5>
				<div v-for="(item,index) in musicDatas" :key="index" class="mui-input-row" style="padding: 10px;">
					<div class="music">
						<audio class="audioDom" :id="'audioDom'+index" :src="item.audioKey"></audio>
						<div class="music-left" @click="payMusic(item,index)">
							<i v-if="!item.ispay" class="icon iconfont">&#xe627;</i>
							<i v-if="item.ispay" class="icon iconfont">&#xe602;</i>
						</div>
						<div class="music-right">
							<label >{{item.name}}</label>
							<div class="music-jdt">
								<div class="music-jx" :id="'jd'+index"></div>
							</div>
						</div>
					</div>
					<div class="music-check" @click="checkMusic(item)">
						<i class="icon iconfont" :style="{color:item.ischeck?'#fe5256':'#ccc'}">&#xe680;</i>
					</div>
				</div>
				<div class="mui-control-item syy" @click="showXyy(initDatas.length)"></div>
				<div class="bottombar" style="bottom: 0px;padding: 5px;" >
					<div  class="mui-control-item xyy" @click="showXyy(initDatas.length+2)">预览此邀请函</div>
				</div>
			</div>
			<div :id="'item'+(initDatas.length+2)" :class="initDatas.length+2 == showDivIndex?'mui-control-content mui-active':'mui-control-content'">
				<div class="yinyue rotate" id="yinyue"><audio loop autoplay id="radioID"></audio></div>
				<div class="mui-control-item syy" style="z-index: 1;" @click="showXyy(initDatas.length+1)"></div>
				<div class="bottombar" style="bottom: 0px;padding: 5px;z-index: 1;" @click="addInvitation">
					<div  class="mui-control-item xyy">生成此邀请函</div>
				</div>
				<div id="dowebok" >
					
				</div>
			</div>
			<div :id="'item'+(initDatas.length+3)" style="overflow: auto;" :class="initDatas.length+3 == showDivIndex?'mui-control-content mui-active':'mui-control-content'">
				<div class="bottombar" style="bottom: 0px;padding: 5px;z-index: 2;position: fixed;">
					<div class="btn mui-btn mui-btn-block procedureBtn"@click="showXyy(ydivIndex)">取消</div>
					<div  class="mui-control-item xyy" style="width: 48%;display: inline-block;" @click="setpx()">确定</div>
				</div>
				<h5 style="padding: 10px;color: #000;">请点击左右方向键进行顺序切换：</h5>
				<div id="dowebok2" style="position: relative;">
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/webuploader.html5only.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		<script src="js/jquery.easing.min.js"></script>
		<!-- <script src="js/chineseStyle.js"></script> -->
		<!-- <script src="js/data.js"></script> -->
		<script src="js/main.js"></script>
		<script src="js/api.js"></script>
		<script type="text/javascript">
			mui.init()
			var app = new Vue({
			  el: '#app',
			  data: {
				ydivIndex:0,
				showDivIndex:1,
				musicDatas:[
					{
						name:"音乐的名称",
						audioKey:"",
						ispay:false,
						ischeck:false
					}
				],
				initDataspx:[],
				initDatas:[
					{
						ym:1,
						type:"infinitusInvitationMain",
						infinitusInvitationMain:{
							theme:"",
							themeSub:"",
							activityTime:""
						}
					},
					{
						ym:2,
						type:"infinitusInvitationIntroduce",
						infinitusInvitationIntroduce:{
							mainTitle:"",
							image:"",
							contnet:""
						}
					},
					{
						ym:3,
						type:"infinitusInvitationProcedure",
						infinitusInvitationProcedure:{
							mainTitle:"",
							datas:[
								{
									time1:"",
									time2:"",
									timeSlot:"",
									contnet:"",
								},
								{
									time1:"",
									time2:"",
									timeSlot:"",
									contnet:"",
								},
								{
									time1:"",
									time2:"",
									timeSlot:"",
									contnet:"",
								}
							]
						}
					},
					{
						ym:4,
						type:"infinitusInvitationGuest",
						infinitusInvitationGuest:{
							mainTitle:"",
							datas:[
								{
									image:"",
									name:"",
									contnet:"",
								},
								{
									image:"",
									name:"",
									contnet:"",
								},
								{
									image:"",
									name:"",
									contnet:"",
								}
							]
						}
					},{
						ym:5,
						type:"infinitusInvitationFoot",
						infinitusInvitationFoot:{
							mainTitle:"",
							address:"",
							activityTime:"",
							tell:"",
							name:"",
							tellOrName:"",
							longitude:"",
							latitude:""
						}
					}
				]
			  },
			  methods: {
				// 活动时间
				showtime(item) {
					let _this = this
					let showTime = new mui.DtPicker({ "type": "datetime" });
					showTime.show(function (rs) {
						item[item.type].activityTime = rs.value;
					})
				},
				// 文件上传
				async upImage(id, item) {
					mui.showLoading("正在上传,请稍后..","div");
				  	let res = await fileUpLoad('file/uploads', id)
				  	if (res.code == 0) {
						item.image = res.data;
						mui.hideLoading();
				  	} else {
				  		console.log("接口出现错误：" + res.msg);
						mui.hideLoading();
				  	}
				},
				// 获取音频列表数据
				async fetchVideos() {
					this.loading = true
					let data = {
						type: 0,
						pageNumber: 0,
						pageSize: 10
					}
					let res = await postHttps('POST', "audioproperty/list", data)
					if (res.code === 0) {
						this.loading = false
						let { content } = res.data
						for (const item of content) {
							item.ischeck = false;
							item.ispay = false;
						}
						this.musicDatas = content
						console.log(this.musicDatas)
					} else {
						this.loading = false
						console.log("接口出现错误：" + res.msg);
					}
				},
				// 生成邀请函接口
				async addInvitation() {
					//依据initdatas数据构建参数机构
					let params = this.getInfinitusInvitationData();
					let res = await postHttps('POST', 'invitation/save', params)
					if (res.code == 0) {
						mui.alert('生成成功!', '', function() {
							wx.miniProgram.redirectTo({url: '/pages/user/make/index?act=template'})
						});
					} else {
						console.log('保存失败')
					}
				},
				getInfinitusInvitationData(initDatas){
					var infinitusInvitationData = {
						infinitusInvitationMain:[],
						infinitusInvitationIntroduce:[],
						infinitusInvitationProcedure:[],
						infinitusInvitationGuest:[],
						infinitusInvitationFoot:[]
					}
					let music = "";
					this.musicDatas.forEach(function(item){
						if(item.ischeck)music = item.audioKey;
					})
					if(!initDatas) initDatas = JSON.parse(JSON.stringify(this.initDatas));
					else initDatas = JSON.parse(JSON.stringify(initDatas))
					initDatas.forEach(function(item,index){
						for (let name in infinitusInvitationData) {
							if(item.type === name){
								item[name].ym = item.ym;
								if(name === "infinitusInvitationMain"){
									item.infinitusInvitationMain.music = music;
									item.infinitusInvitationMain.templateCode = this.getQueryVariable("templateCode");
									item.infinitusInvitationMain.templateId = this.getQueryVariable("id");
									item.infinitusInvitationMain.userId = this.getQueryVariable("openid");
								}
								if(name === "infinitusInvitationProcedure"){
									var newdatas = [];
									var datas = item.infinitusInvitationProcedure.datas;
									for(var i=0;i<datas.length;i++){
										if(datas[i].contnet){
											datas[i].timeSlot = datas[i].time1+"-"+datas[i].time2
											newdatas.push(datas[i]);
										}
									}
									item.infinitusInvitationProcedure.datas = newdatas;
								}
								if(name == "infinitusInvitationFoot"){
									item.infinitusInvitationFoot.tellOrName = item.infinitusInvitationFoot.tell+" "+item.infinitusInvitationFoot.name
								}
								if(name == "infinitusInvitationGuest"){
									var newdatas = [];
									var datas = item.infinitusInvitationGuest.datas;
									for(var i=0;i<datas.length;i++){
										if(datas[i].name){
											newdatas.push(datas[i]);
										}
									}
									item.infinitusInvitationGuest.datas = newdatas;
								}
								infinitusInvitationData[name].push(item[name]);
							}
						}
					})
					return infinitusInvitationData;
				},
				deleteItem(item,index){
					let self = this;
					mui.confirm('确认删除此页面吗？以填写的信息将不能保存', "温馨提示" ,['取消', '删除'], function(e) {
						if (e.index == 1) {
							//删除元素
							self.initDatas.splice(index, 1);
							self.rescheduling();
						}
					})
				},
				copy(item,index){
					//插入添加对象
					let newitem = JSON.parse(JSON.stringify(item));
					this.initDatas.splice(index+1, 0, newitem);
					this.rescheduling();
					mui.toast('已成功复制页面');
				},
				//重新排序
				rescheduling(){
					for(var i=0;i<this.initDatas.length;i++){
						this.initDatas[i].ym = i+1;
					}
				},
				addPicker(ym,index,cla,item){
					var dom = $("#item"+ym).find("."+cla)[index];
					dom.picker = new mui.DtPicker({"type":"time"});
					dom.picker.show(function(rs) {
						if(cla == "lcleft")
							item.time1 = rs.text;
						else
							item.time2 = rs.text;
						dom.picker.dispose();
						dom.picker = null;
					});
				},
				addProcedure(item){
					item[item.type].datas.push({
									time1:"",
									time2:"",
									timeSlot:"",
									contnet:"",
								});
				},
				updateImage(id){
					$("#"+id).click();
				},
				checkMusic(item){
					this.musicDatas.forEach(function(item){
						item.ischeck = false;
					})
					item.ischeck = true;
				},
				payMusic(item,index){
					this.musicDatas.forEach(function(item,index2){
						if(index != index2){
							item.ispay = false;
							var audioDom2  =  document.getElementById("audioDom"+index2);
							audioDom2.pause();
							setTimeout(function(){
								$("#jd"+index2).css("width","0%");
							},200)
						}
					})
					item.ispay = !item.ispay;
					var audioDom  =  document.getElementById("audioDom"+index);
					if(item.ispay){
						audioDom.addEventListener("timeupdate",function(){
							//获取当前播放的百分比  当前进度/总进度
							var percent  = audioDom.currentTime / audioDom.duration;
							$("#jd"+index).css("width",parseInt(percent*100)+"%");
						})
						audioDom.load();
						audioDom.play();
					}else{
						audioDom.pause();
						setTimeout(function(){
							$("#jd"+index).css("width","0%");
						},200)
					}
				},
				showpx(index,initDataspx){
					$("#dowebok2").empty();
					this.showDivIndex = this.initDatas.length+3;
					this.ydivIndex = index;
					var that = this;
					if(!initDataspx){
						this.initDataspx = JSON.parse(JSON.stringify(this.initDatas));
					}else{
						this.initDataspx = initDataspx;
					}
					
					//初始化页面
					var type = this.getQueryVariable("templateCode") || "chineseStyle";
					let infinitusInvitationData = this.getInfinitusInvitationData(this.initDataspx);
					this.loadJS('js/'+type+'.js',function(){
						var relation = {infinitusInvitationMain:eleDatas.eles1,infinitusInvitationIntroduce:eleDatas.eles2,infinitusInvitationProcedure:eleDatas.eles3,infinitusInvitationGuest:eleDatas.eles4,infinitusInvitationFoot:eleDatas.eles5}
						//嘉宾页特殊处理dom结构
						tempGenerate["iigDataDom"] = eles4Data;
						tempGenerate.init(relation,$("#dowebok2"),infinitusInvitationData);
						var sections = $("#dowebok2").find(".section");
						sections.css({
							width: window.innerWidth+"px",
							height: window.innerHeight+"px",
							position: "absolute",
							transform: "scale(0.3)"
						})
						var i = parseInt(sections.length/9);
						$("#dowebok2").css({
							width:window.innerWidth+"px",
							height:(window.innerHeight+(i*(window.innerHeight/3)))+"px"
						});
						that.againLocationSection($("#dowebok2"));
					})
				},
				againLocationSection(dom){
					let self = this;
					var sections = dom.find(".section");
					for(let index=0;index<sections.length;index++){
						var item = $(sections[index]);
						var h = parseInt(index/3); //第几行
						var top = -((35/100)*window.innerHeight)+(h*(31/100)*window.innerHeight);
						var l = index%3;//第几列
						var left = -((32/100)*window.innerWidth)+(l*((32/100)*window.innerWidth));
						item.css({
							top:top+"px",
							left:left+"px"
						});
						var bm = $("<div class='section-bm'>"+(index+1)+"</div>");
						bm.appendTo(item);
						if(index > 1){
							var left = $('<div class="section-left"><i class="icon iconfont">&#xe6ea;</i></div>');
							left.appendTo(item);
							left.click(function(){
								var ls = self.initDataspx[index-1];
								self.initDataspx[index-1] =  self.initDataspx[index];
								self.initDataspx[index] = ls;
								for(var i=0;i<self.initDataspx.length;i++){
									self.initDataspx[i].ym = i+1;
								}
								self.showpx(self.ydivIndex,self.initDataspx);
							});
						}
						if(index>0 && index < sections.length-1){
							var right = $('<div class="section-right"><i class="icon iconfont">&#xe629;</i></div>');
							right.appendTo(item);
							right.click(function(){
								var ls = self.initDataspx[index+1];
								self.initDataspx[index+1] =  self.initDataspx[index];
								self.initDataspx[index] = ls;
								for(var i=0;i<self.initDataspx.length;i++){
									self.initDataspx[i].ym = i+1;
								}
								self.showpx(self.ydivIndex,self.initDataspx);
							});
						}
					}
				},
				setpx(){
					this.initDatas = this.initDataspx;
					this.showXyy(this.ydivIndex);
				},
				loadJS( url, callback ){
					var script = document.createElement('script'),
						fn = callback || function(){};
					script.type = 'text/javascript';
					//IE
					if(script.readyState){
						script.onreadystatechange = function(){
							if( script.readyState == 'loaded' || script.readyState == 'complete' ){
								script.onreadystatechange = null;
								fn();
							}
						};
					}else{
						script.onload = function(){
							fn();
						};
					}
					script.src = url;
					document.getElementsByTagName('head')[0].appendChild(script);
				},
				getQueryVariable(variable)
				{
					   var query = window.location.search.substring(1);
					   var vars = query.split("&");
					   for (var i=0;i<vars.length;i++) {
							   var pair = vars[i].split("=");
							   if(pair[0] == variable){return pair[1];}
					   }
					   return(false);
				},
				showXyy(index){
					var myVideo = document.getElementById("radioID");
					this.showDivIndex = index;
					this.musicDatas.forEach(function(item,index2){
						var audioDom2  =  document.getElementById("audioDom"+index2);
						audioDom2.pause();
						setTimeout(function(){
							$("#jd"+index2).css("width","0%");
						},200)
					})
					$("#dowebok").empty();
					myVideo.pause()
					$("body").attr("class","mui-ios mui-ios-13 mui-ios-13-2 mui-ios-13-2-3");
					if(index == this.initDatas.length+2){
						var dowebok = $('<div class="main-bg"></div>').appendTo($("#dowebok"));
						//初始化页面
						var type = this.getQueryVariable("templateCode") || "chineseStyle";
						let infinitusInvitationData = this.getInfinitusInvitationData();
						$("#radioID").attr("src",infinitusInvitationData.infinitusInvitationMain[0].music)
						this.loadJS('js/'+type+'.js',function(){
							document.addEventListener('DOMContentLoaded', function () {
							    function audioAutoPlay() {
							        myVideo.play();
							        document.addEventListener("WeixinJSBridgeReady", function () {
							            myVideo.play();
							        }, false);
							    }
							    audioAutoPlay();
							});
							//页面数据对象与dom结构数据对象关联
							var relation = {infinitusInvitationMain:eleDatas.eles1,infinitusInvitationIntroduce:eleDatas.eles2,infinitusInvitationProcedure:eleDatas.eles3,infinitusInvitationGuest:eleDatas.eles4,infinitusInvitationFoot:eleDatas.eles5}
							//嘉宾页特殊处理dom结构
							tempGenerate["iigDataDom"] = eles4Data;
							tempGenerate.init(relation,dowebok,infinitusInvitationData);
							$(".section").css("background-image","url(img/"+type+"/gui_bg@3x.png)");
							dowebok.fullpage({
								// sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
								afterLoad: function(anchorLink, index){
									tempGenerate.startAnimate(index);
								},
								onLeave: function(index, direction){
									//所有背景开始执行动画
									dowebok.find(".section").stop();
									dowebok.find(".section").css({  
										"background-position-y": "-300px",
									})
									dowebok.find(".section").animate({
										"background-position-y": "0px",
									},{
									  duration:2500,
									  easing:tempGenerate.options.easing
									})
									tempGenerate.animateReady(direction);
								}
							});
							//默认进去页面执行第一页动画
							tempGenerate.animateReady(1);
							tempGenerate.startAnimate(1);
						})
						
					}
				},
			  },
			  created() {
				  this.fetchVideos()
			  },
			  mounted() {
				this.$nextTick(() => {
					this.$nextTick(() => {
						$(document).on("click",".guanli",function(e){
							if($(this).find(".glmenu").hasClass("active")){
								$(this).find(".glmenu").removeClass("active");
							}else{
								$(this).find(".glmenu").addClass("active");
							}
							e.stopPropagation();
						})
						$(document).on("click",".mui-content",function(e){
							$(this).find(".glmenu").removeClass("active");
						})
						var myVideo = document.getElementById("radioID");
						$("#yinyue").click(function(){
							if($("#yinyue").hasClass("rotate")){
								$("#yinyue").removeClass("rotate");
								myVideo.pause()
							}else{
								$("#yinyue").addClass("rotate");
								myVideo.play()
							}
						});
					});
				});
			  }
			})
		</script>
	</body>

</html>
